<template>
  <view class="mt-20 flex-row items-center justify-center">
    <text class="timer">{{ formattedTime }}</text>
    <view class="ml-20 flex-row justify-center items-center">
      <button @click="toggleTimer" class="timer-button">
        {{ timerRunning ? "暂停" : "开始" }}
      </button>
      <button @click="resetTimer" class="ml-12 timer-button">重置</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "Timer",
  props: {
    args: {
      type: Object,
    },
  },
  data() {
    return {
      running: false,
      currentTime: 0, // unit: ms
      interval: null,
      type: 0, // 0: countdown; 1: countup
    };
  },
  emits: ["onStop"],
  mounted() {
    switch (this.args.type) {
      case "countdown":
        this.type = 0;
        break;
      case "countup":
        this.type = 1;
        break;
      default:
        console.error("Invalid timer type");
        this.type = -1;
    }
    if (!this.args.duration) this.args.duration = 50000;
    this.currentTime = this.type ? 0 : this.args.duration;
    if (!this.args.tick) this.args.tick = 1;
    console.log("Timer Configuration: ", this.args);
  },
  computed: {
    formattedTime() {
      const sec = Math.floor(this.currentTime / 1000);
      const milisec = (this.currentTime % 1000) / 10;
      return `${sec.toString().padStart(2, "0")}:${milisec
        .toString()
        .padStart(2, "0")}`;
    },
    timerRunning() {
      return this.running;
    },
  },
  methods: {
    emitStop() {
      const e = {
        time: this.currentTime,
      };
      const parseNumber = (number) =>
        number == -1 ? this.args.duration : number;
      if (this.args.affect_answer) {
        e.index = -1;
        for (const key in this.args.intervals) {
          const start = parseNumber(this.args.intervals[key][0]);
          const end = parseNumber(this.args.intervals[key][1]);
          console.log("key", key, "start", start, "end", end);
          if (this.currentTime >= start && this.currentTime <= end) {
            e.index = key;
            break;
          }
        }
      }
      this.$emit("onStop", e);
    },
    countdownInterval() {
      if (this.currentTime > 0) {
        this.currentTime = Math.max(0, this.currentTime - this.args.tick);
      } else {
        clearInterval(this.interval);
        this.emitStop();
      }
    },
    countupInterval() {
      if (this.currentTime < this.args.duration) {
        this.currentTime = this.currentTime + this.args.tick;
      } else {
        clearInterval(this.interval);
        this.emitStop();
      }
    },
    toggleTimer() {
      if (this.running) {
        clearInterval(this.interval);
      } else {
        this.interval = setInterval(
          this.type ? this.countupInterval : this.countdownInterval,
          this.args.tick
        );
      }
      this.running = !this.running;
      if (!this.running) this.emitStop();
    },
    resetTimer() {
      clearInterval(this.interval);
      this.currentTime = this.type ? 0 : this.args.duration;
      this.running = false;
    },
  },
};
</script>


<style scoped>
.timer {
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.timer-button {
  width: 160rpx;
}
</style>